<template>
    <div class="login-wrap" :style="'background-image: url('+loginBg+');'">
        <div class="ms-login">
            <div class="ms-title">空气能设备管理平台</div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
                <el-form-item prop="username">
                    <el-input v-model="ruleForm.username" placeholder="账户名">
                        <el-button slot="prepend" icon="el-icon-user"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" placeholder="密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')">
                        <el-button slot="prepend" icon="el-icon-lock"></el-button>
                    </el-input>
                </el-form-item>
                <el-form-item prop="verifyCode" :show-message="showMessage">
                    <el-col :span="11">
                        <el-form-item prop="verifyCode">
                            <el-input type="text" placeholder="验证码" v-model="ruleForm.verifyCode" @keyup.enter.native="submitForm('ruleForm')">
                                <el-button slot="prepend" icon="el-icon-picture-outline-round"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">&nbsp;</el-col>
                    <el-col :span="10">
                        <el-form-item prop="code">
                            <div id="verify-img" @click="refreshVerifyCode"></div>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <div class="login-btn">
                    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                </div>
                <!--<p class="login-tips" >Tip:123</p>-->
            </el-form>
        </div>
        <div class="footer">
            <div style="padding: 15px 0 0;font-size: 14px;color: #fff;">
                南昌市日钛电子科技有限公司   ©2022 Nanchang ritaidianzi All Rights Reserved. <br/>备案/许可证编号: <a href="https://beian.miit.gov.cn" target="_blank">赣ICP备2022003140号-1</a>
            </div>
            <div style="width:300px;margin:0 auto; padding:10px 0;font-size: 14px;">
                <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=36010602000188" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="../../assets/img/beiantubiao.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px;">赣公网安备 36010602000188号</p></a>
            </div>
        </div>
    </div>
</template>

<script>
    import { userlogin,getPublicKey} from '../../api/index';
    var verifyCode = null;
    export default {
        data: function(){
            return {
                loginBg:require('../../assets/img/loginBg/login-bg.jpg'),
                bgList:[require('../../assets/img/loginBg/login-bg.jpg'),
                    require('../../assets/img/loginBg/login-bg.jpg'),
                    require('../../assets/img/loginBg/login-bg.jpg'),
                    require('../../assets/img/loginBg/login-bg.jpg'),
                    require('../../assets/img/loginBg/login-bg.jpg')],
                timer:null,
                ruleForm: {
                    username: '',
                    password: '',
                    verifyCode:''
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    verifyCode: [
                        { required: true, message: '请输入验证码', trigger: 'blur' }
                    ]
                },
                menuData:[],
                showMessage:false
            }
        },
        created(){
            clearInterval(this.timer);
            this.timer = null;
            this.$nextTick(()=>{
                this.initVerifyCode();
            })

        },
        mounted() {
            clearInterval(this.timer);
            this.timer = null;
            this.setTimer()

        },
        beforeDestroy() {
            clearInterval(this.timer);
            this.timer = null;
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        if(!verifyCode.validate(this.ruleForm.verifyCode)){
                            this.$message.error('验证码错误');
                            return;
                        }
                        //获取公钥
                        getPublicKey({}).then((res)=>{
                            const jse = new this.$jsEncrypt()
                            jse.setPublicKey(res)
                            var aesuncrypt_Acount = jse.encrypt(this.ruleForm.username)
                            var aesuncrypt_pwd = jse.encrypt(this.ruleForm.password)
                            userlogin({
                                account:aesuncrypt_Acount,
                                pwd:aesuncrypt_pwd,
                            }).then((res)=>{
                                // console.log(res);
                                if(res.success){
                                    let plist = [];
                                    for(let i=0;i<res.datas.length;i++){
                                        if(res.datas[i].pId<=0){
                                            plist.push(res.datas[i])
                                        }
                                    }
                                    let cList = [];
                                    for(let n=0;n<plist.length;n++){
                                        // var obj={};
                                        // obj['pname'] = plist[n].functionName;
                                        plist[n]['title'] = plist[n].functionName;
                                        plist[n]['index'] = plist[n].functionName;
                                        plist[n]['subs'] =[];
                                        for(let k=0;k<res.datas.length;k++){
                                            let obj={};
                                            if(plist[n].id == res.datas[k].pId){
                                                obj = res.datas[k];
                                                obj['title'] = res.datas[k].functionName;
                                                obj['index'] = res.datas[k].url;
                                                plist[n].subs.push(obj);

                                            }
                                        }
                                        cList.push(plist[n])
                                    }
                                    this.menuData =cList;
                                    localStorage.setItem('Authorization',res.expandData)
                                    localStorage.setItem('uer_role_value',res.roleValue)
                                    localStorage.setItem('menu_item',JSON.stringify(this.menuData));
                                    localStorage.setItem('ms_username',this.ruleForm.username);

                                    this.$router.push('/');
                                }else{
                                    this.$message.error(res.message)
                                }
                            })
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            setTimer: function () {
                let bgIndex = 0;
                this.timer = setInterval( () => {
                    if(bgIndex>=this.bgList.length){
                        bgIndex = 0;
                    }
                    this.loginBg = this.bgList[bgIndex];
                    bgIndex++;
                }, 7000)
            },
            initVerifyCode(){
                //初始化验证码
                verifyCode = new GVerify({
                    id:"verify-img",  //容器的ID
                    type:"number" //图形验证码的类型：blend-数字字母混合类型（默认）、number-纯数字、letter-纯字母
                });
            },
            refreshVerifyCode(){
                //刷新验证码
                verifyCode.refresh();
            },
            validateVerifyCode(){
                //校验验证码
                return verifyCode.validate('校验的值');    //如果校验正确返回ture，校验错误返回false
            },
        }
    }
</script>

<style scoped>
    .login-wrap{
        position: relative;
        width:100%;
        height:100%;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .ms-title{
        width:100%;
        line-height: 50px;
        text-align: center;
        font-size:20px;
        color: #fff;
        border-bottom: 1px solid #ddd;
    }
    .ms-login{
        position: absolute;
        left:50%;
        top:50%;
        width:350px;
        margin:-190px 0 0 -175px;
        border-radius: 5px;
        background: rgba(255,255,255, 0.3);
        overflow: hidden;
    }
    .ms-content{
        padding: 30px 30px;
    }
    .login-btn{
        text-align: center;
    }
    .login-btn button{
        width:100%;
        height:36px;
        margin-bottom: 10px;
    }
    /*.login-tips{*/
        /*font-size:12px;*/
        /*line-height:30px;*/
        /*color:#f00;*/
    /*}*/
    .footer{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: center;
    }
</style>
